<template>
  <abstract-message-list-item
    class="comment-list-item"
    :author-avatar-url="comment.commenter.avatar_url"
    :author-id="comment.commenter_id"
    :author-name="comment.commenter.realname"
    :comment-content="comment.content"
    :create-at="comment.create_at"
    :update-at="comment.update_at"
    @edit="promptEditComment()"
    @remove="handleRemoveComment()"
  >
    <template #main-header>
      <div v-if="hasTags" class="tags">
        <mu-badge v-if="comment.request_check" class="tag-badge" color="secondary" content="请求重审" />
        <mu-badge v-if="comment.is_rechecked" class="tag-badge" color="success" content="已经重审" />
      </div>
    </template>
    <template #actions>
      <mu-button icon @click="clickMessage(comment.commenter.id)">
        <mu-icon value="chat_bubble"></mu-icon>
      </mu-button>
    </template>
  </abstract-message-list-item>
</template>

<script>
import AbstractMessageListItem from '@/components/AbstractMessageListItem'
import api from '@/api'

export default {
  name: 'CommentListItem',
  components: {
    AbstractMessageListItem
  },
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  computed: {
    hasTags() {
      return this.comment.request_check || this.comment.is_rechecked
    }
  },
  methods: {
    // 提示撤销留言
    handleRemoveComment() {
      this.$confirm('确定要撤销？', '提示', {
        type: 'warning'
      }).then(({ result }) => {
        if (result) {
          this.removeComment()
        } else {
          this.$toast.message('已取消')
        }
      })
    },
    // 撤销留言
    async removeComment() {
      try {
        await api.removeQuestionCommentMessage(this.comment.question_id, this.comment.id)
        this.$toast.success('撤销成功')
        this.$emit('refresh')
      } catch (err) {
        this.$apiCatch(err)
      }
    },
    // 提示输入留言
    promptEditComment() {
      this.$prompt('请输入新的留言内容', '提示', {
        inputValue: this.comment.content,
        validator(value) {
          if (!value || value.length <= 0) {
            return {
              valid: false,
              message: '内容不能为空'
            }
          } else if (value.length > 500) {
            return {
              valid: false,
              message: '内容不能太长（500字）'
            }
          } else {
            return {
              valid: true
            }
          }
        }
      }).then(({ result, value }) => {
        if (result) {
          this.editComment(value)
        } else {
          this.$toast.message('已取消')
        }
      })
    },
    // 编辑留言
    async editComment(content) {
      try {
        await api.editQuestionCommentMessage(this.comment.question_id, this.comment.id, content)
        this.$toast.success('编辑成功')
        this.$emit('refresh')
      } catch (err) {
        this.$apiCatch(err)
      }
    },
    // 给某人发私信
    clickMessage(userId) {
      this.$router.push({
        name: 'message-private-chat',
        params: {
          id: userId
        }
      })
    }
  }
}
</script>

<style scoped>
.tags {
  padding: 0 16px;
}
.tag-badge + .tag-badge {
  margin-left: 4px;
}
.is-phone .tags {
  padding: 0 8px;
}
</style>
